<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
*{padding:0;margin:0;}
li{ list-style:none;}
#box{margin:30px auto;width:500px;border:1px solid #ccc;}	
ol li{width:100px; float:left; background:#000;color:#fff; cursor:pointer; height:30px; line-height:30px; text-align:center;}
ol li.on{ background:red;color:#fff;}
ul li{width:500px; text-align:center; height:200px; display:none;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>

//改写前提
	//1.前提：所有东西都在onload里
	//2.改写：不能有函数嵌套，可以有全局变量
	//3.onload 	构造函数		全局变量	-- 属性		函数 -- 方法
	//4.改错：this
window.onload=function(){
	var oTab=new tabSwitch();	
};
function tabSwitch(){
	var ol=document.getElementsByTagName('ol')[0];
	this.btn=ol.getElementsByTagName('li');
	var ul=document.getElementsByTagName('ul')[0];
	this.con=ul.getElementsByTagName('li');
	var _this=this;
	for(var i=0;i<this.btn.length;i++){
		this.btn[i].index=i;
		this.btn[i].onmouseover=function(){
			_this.tab(this);	
		};	
	};	
};

tabSwitch.prototype.tab=function (btn){
	
	for(var i=0;i<this.btn.length;i++){
		this.btn[i].className='';	
		this.con[i].style.display='none';
	};	
	btn.className='on';
	this.con[btn.index].style.display='block';
};

/*window.onload=function(){
	var ol=document.getElementsByTagName('ol')[0];
	var btn=ol.getElementsByTagName('li');
	var ul=document.getElementsByTagName('ul')[0];
	var con=ul.getElementsByTagName('li');
	for(var i=0;i<btn.length;i++){
		btn[i].index=i;
		btn[i].onmouseover=function(){
			for(var i=0;i<btn.length;i++){
				btn[i].className='';	
				con[i].style.display='none';
			};	
			this.className='on';
			con[this.index].style.display='block';
		};	
	};	
};
*/
</script>
</head>

<body>
<div id="box">
	<ol>
    	<li class="on">11111111</li>
    	<li>2222222</li>
    	<li>33333333</li>
    	<li>44444444444</li>
    	<li>555555555</li>
    </ol>
    <ul>
    	<li style="display:block;">内容1</li>
    	<li>内容2</li>
    	<li>内容3</li>
    	<li>内容4</li>
    	<li>内容5</li>
        
    </ul>
</div>
</body>
</html>
